<!doctype html>
<html>

<head>
    <meta charset="utf-8" />
    <title>整体风险情况</title>
    <!-- Antd reset and core css -->
    <link rel="stylesheet" href="{{ url_for('static', filename='vendor/css/reset.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='vendor/css/antd.min.css') }}">
    <style>
        /* 页面基础布局 */
        .page-wrap { max-width: 800px; margin: 24px auto; padding: 0 16px; }
        .page-title { font-size: 20px; font-weight: 600; margin-bottom: 16px; text-align: center; }

        /* 折叠面板头部 */
        .panel-header { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
        .legend-row { display: flex; align-items: center; gap: 12px; justify-content: center; }
        .legend { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #555; }
        .legend-square { width: 12px; height: 12px; display: inline-block; border-radius: 2px; }
        .legend-ng { background: red; }
        .legend-ok { background: green; }
        .legend-miss { background: grey; }

        .panel-title-row { display: flex; align-items: center; gap: 10px; }
        .collapse-btn { cursor: pointer; user-select: none; font-size: 14px; }
        .chart-icon { font-size: 14px; }
        .panel-title { font-size: 16px; font-weight: 600; }

        /* ColorBar 区域 */
        .colorbar-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
        .colorbar-card { border: 1px solid #f0f0f0; border-radius: 8px; padding: 12px; background: #fff; }
        .colorbar-title { font-weight: 600; margin-bottom: 8px; font-size: 14px; }
        .colorbar-bar { display: flex; align-items: center; gap: 10px; }
        .bar-track { flex: 0.7; height: 24px; background: #f5f5f5; border-radius: 0; overflow: hidden; display: flex; }
        .bar-ng { background: red; height: 100%; display: flex; align-items: center; justify-content: center; }
        .bar-ok { background: green; height: 100%; display: flex; align-items: center; justify-content: center; }
        .bar-miss { background: #d9d9d9; height: 100%; display: flex; align-items: center; justify-content: center; }
        /* 取消数值说明，比例由色条体现 */

        /* Tabs 与筛选 */
        .section-title { margin-top: 36px; font-size: 16px; font-weight: 600; margin-bottom: 12px; text-align: center; }
        .tabs { display: flex; margin-bottom: 12px; justify-content: center; }
        .tab-btn { padding: 6px 12px; border: 1px solid #91caff; color: #1677ff; background: #e6f4ff; cursor: pointer; }
        .tab-btn:first-child { border-radius: 6px 0 0 6px; }
        .tab-btn:last-child { border-radius: 0 6px 6px 0; }
        .tab-btn:not(:first-child) { border-left: none; }
        .tab-btn.active { background: #1677ff; color: #fff; border-color: #1677ff; }

        .filters { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; }
        .filter-group { display: flex; align-items: center; gap: 10px; }
        .filter-sep { width: 1px; height: 16px; background: #e5e5e5; }
        .spacer { flex: 1; }
        .search-input { height: 30px; padding: 0 10px; border: 1px solid #d9d9d9; border-radius: 6px; width: 200px; }

        /* 项目ID 标签 */
        .project-label { font-size: 14px; font-weight: 600; margin-bottom: 12px; }

        /* 表格样式 */
        .data-table { width: 100%; border-collapse: collapse; margin-bottom: 16px; }
        .data-table th, .data-table td { border: 1px solid #d9d9d9; padding: 8px 12px; text-align: left; }
        .data-table th { background: #f5f5f5; font-weight: 600; }

        /* 右下角按钮组 */
        .bottom-buttons { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
        .btn-primary { padding: 6px 16px; background: #1677ff; color: #fff; border: 1px solid #1677ff; border-radius: 6px; cursor: pointer; }
        .btn-primary:hover { background: #4096ff; }

        /* Modal 样式 */
        .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 1000; }
        .modal-content { background: #fff; border-radius: 8px; padding: 24px; max-width: 500px; width: 90%; max-height: 80vh; overflow-y: auto; }
        .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
        .modal-title { font-size: 18px; font-weight: 600; }
        .modal-close { background: none; border: none; font-size: 20px; cursor: pointer; color: #666; }
        .modal-close:hover { color: #333; }
        .modal-row { display: flex; margin-bottom: 16px; }
        .modal-label { font-weight: 600; min-width: 100px; color: #333; }
        .modal-value { flex: 1; color: #666; }
        .detail-link { color: #1677ff; text-decoration: none; cursor: pointer; }
        .detail-link:hover { text-decoration: underline; }
    </style>
</head>

<body>
    <div class="page-wrap">
    <div id="root"></div>
    </div>
    <script src="{{ url_for('static', filename='vendor/js/react.development.js') }}"></script>
    <script src="{{ url_for('static', filename='vendor/js/react-dom.development.js') }}"></script>
    <script src="{{ url_for('static', filename='vendor/js/dayjs.min.js') }}"></script>
    <script src="{{ url_for('static', filename='vendor/js/antd.min.js') }}"></script>
    <script src="{{ url_for('static', filename='vendor/js/xlsx.full.min.js') }}"></script>
    <script src="{{ url_for('static', filename='vendor/js/babel.min.js') }}"></script>
    <!-- 你的应用脚本（如果使用 Babel 转译，type="text/babel"） -->
    <script type="text/babel">
        {% raw %}
        // 小图例组件
        const Legend = () => (
            <div className="legend-row">
                <span className="legend"><i className="legend-square legend-ng"></i>NG项</span>
                <span className="legend"><i className="legend-square legend-ok"></i>OK项</span>
                <span className="legend"><i className="legend-square legend-miss"></i>缺失项</span>
            </div>
        );

        // ColorBar 单卡片
        function ColorBarCard({ title, ng, ok, miss }) {
            const total = Math.max(ng + ok + miss, 1);
            const ngW = (ng / total) * 100;
            const okW = (ok / total) * 100;
            const missW = (miss / total) * 100;
            return (
                <div className="colorbar-card">
                    <div className="colorbar-bar">
                        <div className="colorbar-title" style={{ minWidth: '60px', marginBottom: 0 }}>{title}</div>
                        <div className="bar-track">
                            <div className="bar-ng" style={{ width: `${ngW}%` }}>
                                {ng > 0 && <span style={{ color: '#fff', fontSize: '10px', fontWeight: 'bold' }}>{ng}</span>}
                            </div>
                            <div className="bar-ok" style={{ width: `${okW}%` }}>
                                {ok > 0 && <span style={{ color: '#fff', fontSize: '10px', fontWeight: 'bold' }}>{ok}</span>}
                            </div>
                            <div className="bar-miss" style={{ width: `${missW}%` }}>
                                {miss > 0 && <span style={{ color: '#666', fontSize: '10px', fontWeight: 'bold' }}>{miss}</span>}
                            </div>
                        </div>
                    </div>
                </div>
            );
        }

        // 2x2 ColorBar 容器
        function ColorBarGrid({ data }) {
            return (
                <div className="colorbar-grid">
                    <ColorBarCard title="测试段" ng={data.test.ng} ok={data.test.ok} miss={data.test.miss} />
                    <ColorBarCard title="前工序" ng={data.pre.ng} ok={data.pre.ok} miss={data.pre.miss} />
                    <ColorBarCard title="装配段" ng={data.assembly.ng} ok={data.assembly.ok} miss={data.assembly.miss} />
                    <ColorBarCard title="卷绕段" ng={data.winding.ng} ok={data.winding.ok} miss={data.winding.miss} />
                </div>
            );
        }

        // 可折叠 Panel
        function CollapsiblePanel({ title, children, defaultOpen = true, showLegend = false }) {
            const [open, setOpen] = React.useState(defaultOpen);
            return (
                <div style={{ border: '1px solid #f0f0f0', borderRadius: 8, padding: 12, background: '#fff', marginBottom: 12 }}>
                    <div className="panel-header">
                        {showLegend && <Legend />}
                        <div className="panel-title-row">
                            <span className="collapse-btn" onClick={() => setOpen(v => !v)}>{open ? '▼' : '▶'}</span>
                            <span className="chart-icon">📊</span>
                            <span className="panel-title">{title}</span>
                        </div>
                    </div>
                    {open && (
                        <div>
                            {children}
                        </div>
                    )}
                </div>
            );
        }

        function Tabs({ tabs, activeKey, onChange }) {
            return (
                <div className="tabs">
                    {tabs.map(t => (
                        <button key={t.key} className={"tab-btn" + (t.key === activeKey ? " active" : "")} onClick={() => onChange(t.key)}>{t.label}</button>
                    ))}
                </div>
            );
        }

        function Filters({ state, onChange }) {
            const toggle = (group, key) => {
                onChange({ ...state, [group]: { ...state[group], [key]: !state[group][key] } });
            };
            return (
                <div className="filters">
                    <div className="filter-group">
                        <label><input type="checkbox" checked={state.sections.test} onChange={() => toggle('sections', 'test')} /> 测试段</label>
                        <label><input type="checkbox" checked={state.sections.pre} onChange={() => toggle('sections', 'pre')} /> 前工序</label>
                        <label><input type="checkbox" checked={state.sections.assembly} onChange={() => toggle('sections', 'assembly')} /> 装配段</label>
                        <label><input type="checkbox" checked={state.sections.winding} onChange={() => toggle('sections', 'winding')} /> 卷绕段</label>
                    </div>
                    <div className="filter-sep"></div>
                    <div className="filter-group">
                        <label><input type="checkbox" checked={state.types.ng} onChange={() => toggle('types', 'ng')} /> NG项</label>
                        <label><input type="checkbox" checked={state.types.ok} onChange={() => toggle('types', 'ok')} /> OK项</label>
                        <label><input type="checkbox" checked={state.types.miss} onChange={() => toggle('types', 'miss')} /> 缺失项</label>
                    </div>
                    <div className="spacer"></div>
                    <input className="search-input" placeholder="搜索..." value={state.keyword} onChange={e => onChange({ ...state, keyword: e.target.value })} />
                </div>
            );
        }

        // Modal 组件
        function DetailModal({ isOpen, onClose, detailData }) {
            if (!isOpen) return null;
            
            return (
                <div className="modal-overlay" onClick={onClose}>
                    <div className="modal-content" onClick={e => e.stopPropagation()}>
                        <div className="modal-header">
                            <div className="modal-title">详细信息</div>
                            <button className="modal-close" onClick={onClose}>×</button>
                        </div>
                        <div className="modal-row">
                            <div className="modal-label">特征明细值:</div>
                            <div className="modal-value">{detailData?.feature || '阳极涂布_JR数出极耳类型'}</div>
                        </div>
                        <div className="modal-row">
                            <div className="modal-label">逻辑描述:</div>
                            <div className="modal-value">{detailData?.logic || '阳极涂布工艺中，JR数出极耳类型的选择直接影响电池性能和安全性'}</div>
                        </div>
                        <div className="modal-row">
                            <div className="modal-label">风险提示:</div>
                            <div className="modal-value">{detailData?.risk || '阳极模切，出极耳类型不当可能导致电池内阻增加，影响充放电效率'}</div>
                        </div>
                    </div>
                </div>
            );
        }

        function App() {
            // 模拟数据表
            const mockA = {
                test: { ng: 10, ok: 14, miss: 31 },
                pre: { ng: 5, ok: 16, miss: 27 },
                assembly: { ng: 4, ok: 5, miss: 12 },
                winding: { ng: 6, ok: 9, miss: 14 },
            };
            const mockB = {
                test: { ng: 13, ok: 11, miss: 30 },
                pre: { ng: 9, ok: 16, miss: 23 },
                assembly: { ng: 5, ok: 7, miss: 9 },
                winding: { ng: 10, ok: 8, miss: 11 },
            };

            // 模拟数据表名称
            const mockTableNames = {
                A: 'ERP-25-2194_N_A',
                B: 'ERP-25-2194_N_B'
            };

            const [active, setActive] = React.useState('A');
            const data = active === 'A' ? mockA : mockB;
            const [modalOpen, setModalOpen] = React.useState(false);
            const [modalData, setModalData] = React.useState(null);

            const [filter, setFilter] = React.useState({
                sections: { test: true, pre: true, assembly: true, winding: true },
                types: { ng: true, ok: false, miss: false },
                keyword: '',
            });

            const tabs = [
                { key: 'A', label: 'ERP-25-2194_N_A' },
                { key: 'B', label: 'ERP-25-2194_N_B' },
            ];

            return (
                <div>
                    <div className="page-title">整体风险情况</div>
                    
                    {/* 图例只显示一次 */}
                    <div style={{ marginBottom: '16px' }}>
                        <Legend />
                    </div>
                    
                    {/* 连续显示两个数据表 */}
                    <CollapsiblePanel title="ERP-25-2194_N_A" showLegend={false}>
                        <ColorBarGrid data={mockA} />
                    </CollapsiblePanel>
                    <CollapsiblePanel title="ERP-25-2194_N_B" showLegend={false}>
                        <ColorBarGrid data={mockB} />
                    </CollapsiblePanel>

                    {/* 下半区：报告 Tabs 与筛选 */}
                    <div className="section-title">风险评估报告</div>
                    <Tabs tabs={tabs} activeKey={active} onChange={setActive} />
                    <Filters state={filter} onChange={setFilter} />
                    
                    {/* 风险评估报告部分的按钮 */}
                    <div className="bottom-buttons">
                        <button className="btn-primary">筛选</button>
                        <button className="btn-primary">下载完整表格</button>
                    </div>

                    {/* 项目ID 标签 - 新内容区域 */}
                    <div style={{ marginTop: '32px' }}>
                        <div className="project-label">项目ID: {mockTableNames[active]}</div>
                    
                    {/* 数据表格 */}
                    <table className="data-table">
                        <thead>
                            <tr>
                                <th>工段</th>
                                <th>全局工序名称</th>
                                <th>可制造性名称</th>
                                <th>其他信息</th>
                            </tr>
                        </thead>
                        <tbody>
                            {(
                                active === 'A'
                                    ? [
                                        { section: '测试段', process: 'LFP_M6UP_OCVB', manufacturability: '归一化测K导入', extra: '详情' },
                                        { section: '前工序', process: 'LFP_M6UP_阳极模切', manufacturability: '极耳设计规范', extra: '详情' },
                                        { section: '装配段', process: 'LFP_M6UP_阳极涂布', manufacturability: '阳极涂布重量', extra: '' },
                                        { section: '卷绕段', process: 'LFP_M6UP_OCV2', manufacturability: 'PG_OCV2静置时间合理性', extra: '' },
                                      ]
                                    : [
                                        { section: '测试段', process: 'LFP_M6UP_OCVB', manufacturability: '归一化测K导入', extra: '详情' },
                                        { section: '前工序', process: 'LFP_M6UP_阳极模切', manufacturability: '极耳设计规范', extra: '详情' },
                                        { section: '装配段', process: 'LFP_M6UP_阳极涂布', manufacturability: '阳极涂布重量', extra: '' },
                                        { section: '卷绕段', process: 'LFP_M6UP_OCV2', manufacturability: 'PG_OCV2静置时间合理性', extra: '' },
                                      ]
                            ).map((row, idx) => (
                                <tr key={idx}>
                                    <td>{row.section}</td>
                                    <td>{row.process}</td>
                                    <td>{row.manufacturability}</td>
                                    <td>
                                        {row.extra === '详情' ? (
                                            <span 
                                                className="detail-link" 
                                                onClick={() => {
                                                    setModalData({ 
                                                        feature: '阳极涂布_JR数出极耳类型',
                                                        logic: '阳极涂布工艺中，JR数出极耳类型的选择直接影响电池性能和安全性',
                                                        risk: '阳极模切，出极耳类型不当可能导致电池内阻增加，影响充放电效率'
                                                    });
                                                    setModalOpen(true);
                                                }}
                                            >
                                                详情
                                            </span>
                                        ) : (
                                            row.extra
                                        )}
                                    </td>
                                </tr>
                            ))}
                        </tbody>
                    </table>
                    
                    {/* 项目详情部分的按钮 */}
                    <div className="bottom-buttons">
                        <button className="btn-primary">下载当前报告</button>
                        <button className="btn-primary">下载完整表格</button>
                    </div>
                    </div>
                    
                    {/* Modal 组件 */}
                    <DetailModal 
                        isOpen={modalOpen} 
                        onClose={() => setModalOpen(false)} 
                        detailData={modalData} 
                    />
            </div>
            );
        }

        ReactDOM.createRoot(document.getElementById('root')).render(<App />);
        {% endraw  %}
    </script>
</body>

</html>